<template>
	<view>
		<u-navbar placeholder fixed autoBack border title="班组">
			<view slot="right" @click="search"><u-icon size="44rpx" name="search" color="#151C24"></u-icon></view>
		</u-navbar>

		<view class="d-p-30">
			<template v-if="info">
				<view class="d-m-t-20"><text class="d-font-36" style="font-weight: bold;">班组概况</text></view>
				<view class="card d-m-t-30 d-p-30">
					<view class="d-flex" style="color: #5D6672;">
						<view class="d-flex-1 d-font-24 d-flex">
							<text style="">班组名称</text>
							<text class="d-m-l-20 d-flex-1 u-line-1" style="color: #162233;font-weight: bold;">{{ info.bzmc }}</text>
						</view>
						<view class="d-flex-1 d-font-24">
							<text style="">班组人数</text>
							<text class="d-m-l-20" style="color: #162233;font-weight: bold;">{{ info.member }}人</text>
						</view>
					</view>
					<view class="d-flex d-m-t-20" style="color: #5D6672;">
						<view class="d-flex-1 d-font-24 d-flex">
							<text style="">所属单位</text>
							<text class="d-m-l-20 d-flex-1 u-line-1" style="color: #162233;font-weight: bold;">{{ info.deptName }}</text>
						</view>
					</view>
				</view>

				<view class="d-m-t-50"><text class="d-font-36" style="font-weight: bold;">班组组成</text></view>
				<view class="card d-m-t-30 d-p-30">
					<view class="d-flex" style="color: #5D6672;">
						<view class="d-flex-1 d-font-24 d-flex">
							<text style="">班组长</text>
							<text class="d-m-l-20 d-flex-1 u-line-1" style="color: #162233;font-weight: bold;">{{ info.data.bzzxm }}</text>
						</view>
						<view class="d-flex-1 d-font-24">
							<text style="">班组人数</text>
							<text class="d-m-l-20" style="color: #162233;font-weight: bold;">{{ info.data.member }}人</text>
						</view>
					</view>
					<view class="d-flex d-m-t-20" style="color: #5D6672;">
						<view class="d-flex-1 d-font-24">
							<text style="">男性人数</text>
							<text class="d-m-l-20" style="color: #162233;font-weight: bold;">{{ info.data.man }}人</text>
						</view>
						<view class="d-flex-1 d-font-24">
							<text style="">女性人数</text>
							<text class="d-m-l-20" style="color: #162233;font-weight: bold;">{{ info.data.woman }}人</text>
						</view>
					</view>
				</view>
			</template>

			<template v-if="list && list.length > 0">
				<view class="d-m-t-50"><text class="d-font-36" style="font-weight: bold;">人员列表</text></view>
				<view class="d-p-30 d-font-28">
					<view class="d-flex" v-for="(item, index) in list" :key="index" style="height: 100rpx;" @click="memberDetail(item)">
						<view class="u-line-1" style="width: 160rpx;">{{ item.xm }}</view>
						<view class="d-flex-1" style="font-weight: bold;">{{ item.zjhm }}</view>
						<view style="margin-right: 104rpx;"><u--image width="32rpx" height="32rpx" src="/static/icon/icon-53.png"></u--image></view>
						<u--image width="19rpx" height="32rpx" src="/static/icon/icon-52.png"></u--image>
					</view>
				</view>
			</template>
			<template v-else>
				<view style="padding: 10vh;"><u-empty icon="/static/image/none.png" text="暂无数据"></u-empty></view>
			</template>
		</view>
	</view>
</template>

<script>
import { cpgGo, cpgMember } from '../../../common/api.js';
export default {
	data() {
		return {
			info: null,
			pageNum: 1,
			pageSize: 20,
			pageLast: 1,
			list: []
		};
	},
	onLoad() {
		this.init();
	},
	onReachBottom() {
		if (this.pageNum < this.pageLast) {
			++this.pageNum;
			this.cpgMember().then(e => {
				this.list = this.list.concat(e.data);
			});
		}
	},
	methods: {
		init() {
			uni.showLoading({
				title: '加载中...',
				mask: true
			});
			cpgGo({
				params: {
					bzid: this.$user.ssgcxx[this.$appIndex].bzid
				}
			}).then(e => {
				this.info = e.data;
				this.pageNum = 1;
				this.list = [];
				this.cpgMember().then(e => {
					this.list = e.data;
					this.pageLast = Math.ceil(e.total / this.pageSize);
					uni.hideLoading();
				});
			});
		},
		cpgMember() {
			return cpgMember({
				params: {
					pageNum: this.pageNum,
					pageSize: this.pageSize,
					id: this.$user.ssgcxx[this.$appIndex].bzid
				}
			});
		},
		search() {
			uni.$u.route({
				url: '/pages/index/team/search'
			});
		},
		memberDetail(item) {
			uni.$u.route({
				url: '/pages/index/member/memberDetail',
				params: {
					id: item.id
				}
			});
		}
	}
};
</script>

<style lang="scss">
page {
	background-color: #fbfcfc;

	.card {
		box-shadow: 0rpx 5rpx 10rpx rgba(0, 0, 0, 0.05);
		border-radius: 10rpx;
		background-color: #ffffff;
	}
}
</style>
